<template>
	<view>
		<view class="head">
			<h2>集团办公</h2>
			<h4>打造企业私有沟通平台</h4>
			<u-image class="img" width="700rpx" height="700rpx" :src="require('@/static/login/login.png')"></u-image>
		</view>
		<view>
			<u--form labelPosition="left" :model="baseFormData" :rules="rules" ref="uForm">
				<u-form-item class="itemFirst" label="用户名" prop="baseFormData.username" ref="item1">
					<u--input v-model="baseFormData.username" border="none" placeholder="请输入用户名"></u--input>
				</u-form-item>
				<u-form-item class="itemFirst" label="密码" prop="baseFormData.password" ref="item1">
					<u--input v-model="baseFormData.password" password clearable border="none"
						placeholder="请输入密码"></u--input>
				</u-form-item>
				<u-cell :border="false" class="itemFirst">
					<view slot="title">
						<u-checkbox-group v-model="checkBox" placement="column" @change="checkboxChange">
							<u-checkbox name="rember" v-model="checked" shape="square" label="记住密码"></u-checkbox>
						</u-checkbox-group>
					</view>
					<view slot="value">
						<u--text type="success" text="忘记密码?"></u--text>
					</view>
				</u-cell>
			</u--form>
			<view class="button">
				<u-button class="btn" type="primary" :loading="loading" loadingText="加载中" @click="login()">登录</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseFormData: {
					username: "",
					password: "",
				},
				rules: {
					'userInfo.username': {
						type: 'string',
						required: true,
						message: '请填写用户名',
						trigger: ['blur', 'change']
					},
					'userInfo.password': {
						type: 'string',
						required: true,
						message: '请填写密码',
						trigger: ['blur', 'change']
					}
				},
				loading: false,
				checkBox: [],
				checked: '',
			};
		},
		methods: {
			checkboxChange() {

			},
			login() {
				this.loading = true;
				var flag = false;
				if (this.checkBox.length > 0) {
					flag = true;
				} else {
					flag = false;
				}
				var data = {
					username: this.baseFormData.username,
					password: this.baseFormData.password,
					account: this.baseFormData.password,
					remember: flag,
				}
				uni.request({
					url: 'http://103.254.76.2:2083/dist/interface/public/index.php/index/Index/login',
					data: data,
					success: res => {
						setTimeout(() => {
							uni.setStorageSync('token', res.data.data.token);
							uni.setStorageSync('phone', res.data.data.phone);
							uni.setStorageSync('worker_name', res.data.data.worker_name);
							uni.setStorageSync('img_url', res.data.data.img_url);
							uni.setStorageSync('new_depart_name', res.data.data.new_depart_name);
							this.$u.toast('登录成功');
							//从登录页面跳转至主页
							uni.navigateTo({
								url: 'home'
							});
							this.loading = false;
						}, 1000)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.head {
		text-align: center;
		margin-top: 160rpx;
	}

	h2 {
		margin: 40rpx;
	}

	h4 {
		margin: 20rpx;
	}

	.img {
		display: inline-block;
		text-align: center;
	}

	::v-deep .u-form-item__body__left {
		width: 120rpx !important;
	}

	.itemFirst {
		margin-left: 120rpx;
		margin-right: 120rpx;
	}

	.button {
		margin-top: 60rpx;
		margin-left: 100rpx;
		margin-right: 100rpx;
	}

	::v-deep .u-cell__body {
		padding: 0;
		margin-top: 20rpx;
	}

	.btn {
		background-color: #1989fa;
		border-color: #1989fa;
		color: white;
		font-size: 14px;
	}
</style>